<template>
	<view class="bg-f2">
		<u-navbar
		  bgColor="#1D1D20"
		  title="我的余额"
		  placeholder
		  autoBack
		  fixed
		  titleStyle="color:#fff"
		  leftIconColor="#fff"
		  @rightClick="toConvert"
		>
			<view
				class="u-nav-slot color-w"
				slot="right"
			>
				余额充值
			</view>
		</u-navbar>
		
		<view class="w-100" style="height: 20rpx;"></view>
		<view class="contentBox p-l-20 p-b-30 p-t-30 m-t-10 b-r-10  border-box bg-white flex align-center justify-between">
			<view>
				<view class="font-32">当前余额</view>
				<view class="font-50 font-b">{{userInfo.balance || 0}}</view>
			</view>
			<view class="color-w bg-yellow boxBorder" @click="goTo">余额提现</view>
		</view>
		<view class="contentBox">
			<view class="flex justify-between m-t-10">
				<view class="font-30 font-b">余额流水明细</view>
				<view class="color-gray font-28" @click="lookAll">查看全部</view>
			</view>
			<view class="padding-sm border-bottom m-t-10 bg-white b-r-10" v-for="(item, index) in walletList" :key="index">
				<view class="flex justify-between font-28 text-bold">
					<view></view>
					<view class="color-yellow">{{ item.addRed ? '+' : '-' }}{{item.money}}</view>
				</view>
				<view class="padding-tb-xs text-gray">业务编号：{{item.busid}}</view>
				<view class="word-break text-gray">备注：{{item.rema}}</view>
				<view class="padding-top-xs text-gray">时间：{{item.createTime}}</view>
			</view>
			<empty text="暂无数据..." :show="walletList.length == 0" />
		</view>
	</view>
</template>

<script>
	import { customerInfo } from '@/common/api/customer.js'
	import { walletFlow } from '@/common/api/customer.js'
	export default {
		data() {
			return {
				title: '',
				pageNo: 0,
				walletList: [],
				addRed: null,
                transfer: true,
				walletInfo:{},
				userInfo:{}
			};
		},
		onShow() {
			this.pageNo = 0
			this.walletList = []
			this.getwalletFlow()
			this.getCustomerInfo()
		},
		methods: {
			// 去余额充值
			toConvert(){
			  uni.navigateTo({
				url: "/pages/newVoucher/addVoucher",
			  });
			},
			// 获取用户信息
			getCustomerInfo() {
				customerInfo().then(res => {
					this.userInfo = res.data.user || {}
					this.$store.commit('user/setUserInfo', res.data.user || {})
				})
			},
			lookAll(){
              uni.navigateTo({
                  url: '/pages/my/wallet/historyRecord'
              })
			},
            goTo(){
              uni.navigateTo({
                  url: '/pages/my/advertising/pointExchange'
              })
            },
			getwalletFlow() {
				let params = {
					pageNo: 1,
					pageSize: 5,
					addRed: this.addRed
				}
				walletFlow(params).then(res => {
					this.walletList = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg-f2{
	background-color: #f2f2f2 !important;
	min-height: 100vh;
}
.contentBox{
	width: calc(100% - 40rpx);
	margin: 0 auto;
}
.boxBorder{
	border-top-left-radius: 50rpx;
	border-bottom-left-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	width: 160rpx;
	text-align: center;
}
</style>
